<template>
  <div>
    <van-search
      left-text="返回"
      v-model="value"
      placeholder=" 请输入小区或地址"
      left-icon="search"
      show-action
    >
      <template #left
        ><router-link to="./hk-index"
          ><van-icon class="tubiao1" name="arrow-left" /></router-link
      ></template>
      <template #label>
        <router-link to="./hk-dizhi">{{ city1 }}▼</router-link> |</template
      >
      <template #action
        ><van-icon
          class="tubiao"
          name="location-o"
          @click="$router.push('./hk-ditu')"
      /></template>
    </van-search>
    <div class="box">
      <van-sticky :offset-top="0">
        <van-dropdown-menu>
          <van-dropdown-item title="区域">
            <div>
              <van-picker :columns="columns" />

              <van-button type="default" class="button2">取消</van-button>
              <van-button type="primary" class="button1">确认</van-button>
            </div>
          </van-dropdown-item>
          <van-dropdown-item title="方式">
            <div>
              <van-picker :columns="columns1" />

              <van-button type="default" class="button2">取消</van-button>
              <van-button type="primary" class="button1">确认</van-button>
            </div>
          </van-dropdown-item>
          <van-dropdown-item title="租金">
            <div>
              <van-picker :columns="columns2" />

              <van-button type="default" class="button2">取消</van-button>
              <van-button type="primary" class="button1">确认</van-button>
            </div>
          </van-dropdown-item>
          <van-dropdown-item title="筛选" @open="fn"> </van-dropdown-item>
        </van-dropdown-menu>
        <van-popup
          v-model="show"
          position="right"
          :style="{ width: '60%', height: '100%' }"
          >内容</van-popup
        >
      </van-sticky>
    </div>
    <div v-for="(item, index) in list" :key="index" class="bgc-box">
      <van-card
        :price="item.price"
        :desc="item.desc"
        :title="item.title"
        :thumb="'http://liufusong.top:8080' + item.houseImg"
      >
        <template #tags>
          <div class="dite-box">
            <van-tag plain type="danger" class="dite" text-color="#68cdd9"
              >近地铁</van-tag
            >
          </div>
        </template>
      </van-card>
    </div>
  </div>
</template>

<script>
import { chengshi, getfind } from '@/api/user'
export default {
  components: {},
  props: {},
  data() {
    return {
      city1: JSON.parse(localStorage.getItem('city')).label || '北京',
      show: false,
      list: [],
      value: '',
      columns: [
        // 第一列
        {
          values: [],
          defaultIndex: 1
        },
        // 第二列
        {
          values: [],
          defaultIndex: 2
        }
      ],
      columns1: [
        // 第一列
        {
          values: ['周一', '周二', '周三', '周四', '周五'],
          defaultIndex: 1
        },
        // 第二列
        {
          values: ['早', '中', '晚'],
          defaultIndex: 2
        }
      ],
      columns2: [
        // 第一列
        {
          values: ['周一', '周二', '周三', '周四', '周五'],
          defaultIndex: 2
        },
        // 第二列
        {
          values: ['上午', '下午', '晚上'],
          defaultIndex: 1
        }
      ]
    }
  },

  computed: {},
  watch: {},
  async created() {
    const {
      body: { list }
    } = await chengshi()
    this.list = list

    const res = await getfind()
    const {
      body: { area, subway }
    } = res
    const { children } = area
    console.log(area, subway)
    console.log(children)
    children.forEach((item) => {
      this.columns[1].values.push(item.label)
    })
    this.columns[0].values.push(area.label)
    this.columns[0].values.push(subway.label)
  },
  methods: {
    fn() {
      this.show = true
    }
  }
}
</script>

<style scoped lang="less">
::v-deep .van-search {
  background-color: #0eb26e;
}
::v-deep .van-search--show-action {
  z-index: 999;
  width: 100%;
}
.tubiao1 {
  font-size: 20px;
  margin-right: 15px;
  color: #fff;
}
.tubiao {
  font-size: 20px;
  color: #fff;
}
.button1 {
  width: 65%;
}
.button2 {
  width: 35%;
}
::v-deep .van-tag--plain {
  background-color: #e1f5f8;
}
::v-deep .van-card {
  background-color: #fff;
}
::v-deep .van-dropdown-menu__bar--opened {
  z-index: 1;
}
</style>
